<template>
  <div>
    <el-dialog
      v-if="showWin"
      v-dialogDrag="showWin"
      :title="formTitle"
      :close-on-click-modal="false"
      :visible.sync="showWin"
      width="90%"
    >
      <el-form
        id="proForm"
        ref="proForm"
        :rules="rules"
        :model="form"
        label-width="auto"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="归档标记 :" prop="archiveFlag">
              <el-input v-model="form.archiveFlag"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="产品规范码 :" prop="psrNum">
              <el-input v-model="form.psrNum" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用途代码 :" prop="apnNum">
              <el-input v-model="form.apnNum"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户代码 :" prop="custNum">
              <el-input v-model="form.custNum"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="维护日期 :" prop="lastDate">
              <el-date-picker
                v-model="form.lastDate"
                :picker-options="pickerOptions"
                :popper-class="'currentDatePickerClass'"
                style="width: 100%"
                type="date"
                align="right"
                value-format="yyyyMMdd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="维护者 :" prop="userId">
              <el-input v-model="form.userId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="说明 :" prop="desc">
              <el-input v-model="form.desc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="行业类别1 :" prop="tradeKind1">
              <el-input v-model="form.tradeKind1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="行业类别2 :" prop="tradeKind2">
              <el-input v-model="form.tradeKind2"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="行业类别3 :" prop="tradeKind3">
              <el-input v-model="form.tradeKind3"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showWin = false">关 闭</el-button>
        <el-button
          v-oauth
          data-oauthUuid="1620438969000"
          type="primary"
          :loading="loading"
          @click="submit"
          >提 交</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Api from '@/api/productSpecification'

export default {
  data() {
    return {
      pickerOptions: {
        disabledDate: (time) => {
          const timeNow = new Date()
          return time.getTime() < timeNow.getTime() - 86400000
        },
      },
      showWin: false,
      formTitle: '创建',
      form: {
        archiveFlag: '',
      },
      rules: {
        linkAddress: [
          { required: true, message: '请输入联系地址', trigger: 'blur' },
        ],
        declarerUnit: [
          { required: true, message: '请输入用户单位', trigger: 'blur' },
        ],
        declarer: [
          { required: true, message: '请输入用户姓名', trigger: 'blur' },
        ],
        systemName: [
          { required: true, message: '请选择运维系统', trigger: 'blur' },
        ],
        faultPhenomenon: [
          { required: true, message: '请输入故障现象', trigger: 'blur' },
        ],
        area: [{ required: true, message: '请选择区域', trigger: 'change' }],
        faultType: [
          { required: true, message: '请选择故障类型', trigger: 'change' },
        ],
        eventLevel: [
          { required: true, message: '请选择事件等级', trigger: 'change' },
        ],
        eventType: [
          { required: true, message: '请选择事件类型', trigger: 'change' },
        ],
        receiverUnit: [
          { required: true, message: '请选择接收班组', trigger: 'change' },
        ],
        receiver: [
          { required: true, message: '请选择接收人', trigger: 'change' },
        ],
      },
      loading: false,
    }
  },
  methods: {
    show(currentRow, data) {
      if (data) {
        this.form = data
        this.formTitle = '修改'
      } else {
        this.form = {
          archiveFlag: '',
          psrNum: currentRow.psrNum,
          apnNum: '',
          custNum: '',
          lastDate: '',
          userId: '',
          desc: '',
          tradeKind1: '',
          tradeKind2: '',
          tradeKind3: '',
        }
        this.formTitle = '创建'
      }
      this.showWin = true
    },
    closeWin() {
      this.showWin = false
    },
    submit() {
      if (this.formTitle === '创建') {
        Api.createUsage(this.form).then(
          (data) => {
            this.$message({
              type: 'success',
              message: '新增产品规范用途信息成功!',
            })
            this.$emit('appendData', 'refreshChild')
            this.closeWin()
          },
          () => {}
        )
      } else {
        Api.modifyUsage(this.form).then((data) => {
          this.$message({
            type: 'success',
            message: '修改产品规范用途信息成功!',
          })
          this.$emit('appendData', 'refreshChild')
          this.closeWin()
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
/deep/.el-date-editor--datetimerange.el-input__inner {
  width: 100%;
}
.currentDatePickerClass
  > .el-picker-panel__footer
  > .el-button--text
  :first-child {
  display: none;
}
</style>
